<template>
  <div class="main_box">
    <!-- 主体列表 -->
    <div class="add_wrap">
        <div class="tit">
            <h2>医院信息</h2>
            <el-button style="margin: 11px 0;" plain size="mini" type="success" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="otherForm" ref="otherForm" label-width="160px" :rules="otherRules">
            <el-row>
              <el-form-item label="第三方" prop="thirdId">
                <el-select
                  :disabled="IsEditing"
                  v-model="otherForm.thirdId" placeholder="请选择第三方"
                  :loading="loadingIns"
                  filterable clearable reserve-keyword>
                  <el-option
                    v-for="item in pickThirdAuthList" :key="item.value" :label="item.label"
                    :value="item.value" :disabled="IsEditing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="医院名称" prop="hospitalId">
                <el-select
                    :disabled="IsEditing"
                    v-model="otherForm.hospitalId" placeholder="请选择医院"
                    :loading="loadingIns"
                    filterable clearable reserve-keyword>
                    <el-option
                        v-for="item in pickHospitalList" :key="item.value" :label="item.label"
                        :value="item.value" :disabled="IsEditing"></el-option>
                </el-select>
              </el-form-item>
              <OfficeSelect @officeId="getOfficeId" :hospital-id="otherForm.hospitalId"
                             :id="otherForm.officeId" :is-disable="IsEditing"></OfficeSelect>
              <el-form-item label="第三方医院名称" prop="compName">
                  <el-input v-model="otherForm.compName" type="text"></el-input>
              </el-form-item>
              <el-form-item label="下载账号" prop="clientId">
                  <el-input v-model="otherForm.clientId"></el-input>
              </el-form-item>
              <el-form-item label="下载密码" prop="clientGuid" >
                  <el-input v-model="otherForm.clientGuid"
                  show-password></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button plain type="primary" @click="sureOtherClick()"  :disabled="IsRegistered">保 存 </el-button>
                  <el-button @click="resetForm('otherForm')" :disabled="IsEditing">重 置</el-button>
              </el-form-item>
            </el-row>
        </el-form>
    </div>
  </div>
</template>

<script>
import * as message from '@/constants/message';
import OrganApi from "@/api/organ/organ";
import HospitalApi from "@/api/institution/hospital";
import OfficeSelect from "@/components/OfficeSelect";

export default {
    data() {
        return {
            otherForm:{
              accountId: '',
              thirdId: null,
              hospitalId: null,
              officeId: null,
              compName: '',
              clientId: '',
              clientGuid: ''  // GUID 一般为32位
            },
            loadingIns: false,
            pickHospitalList: [],
            pickThirdAuthList: [],
            otherRules: {
                // 表单校验
                thirdId: [
                  {
                    required: true,
                    message: '请选择第三方',
                    trigger: 'blur'
                  }
                ],
                hospitalId: [
                    {
                        required: true,
                        message: '请选择医院',
                        trigger: 'blur'
                    }
                ],
                compName: [
                    {
                        required: true,
                        message: '请输入第三方医院名',
                        trigger: 'blur'
                    },
                ],
                clientId: [
                    {
                        required: true,
                        message: '请输入下载账号',
                        trigger: 'blur'
                    },
                ],
                clientGuid: [
                    {
                        required: true,
                        message: '请输入下载密码',
                        trigger: 'blur'
                    }
                ]
            },
            IsEditing: false,
            IsRegistered: false
        }
    },
    components: {
      OfficeSelect
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.$Utils.clearData(this.otherForm)
            if (this.$route.query.accountId) {
              this.otherForm.accountId = this.$route.query.accountId
              this.getData()
            }
            this.listThirdName()
            this.listHospital()
        },
        listHospital() {
            // 获取医院数据以及Id
          let _this = this
          _this.loadingIns = true
          let cond = {
            hospitalType: 1
          }
          HospitalApi.getHospitalNameList(cond)
            .then(res => {
              setTimeout(() => {
                _this.loadingIns = false
                _this.pickHospitalList = res.data.map(item => {
                  return {
                    value: item.hospitalId,
                    label: item.hospitalName
                  }
                })
              }, 200)
            })
            .catch(error => {
              _this.pickHospitalList = []
              console.error(error)
            })
        },
        listThirdName(){
          let _this = this
          OrganApi.listThirdName()
            .then(res => {
              setTimeout(() => {
                _this.pickThirdAuthList = res.data.map(item => {
                  return {
                    value: item.id,
                    label: item.name
                  }
                })
              }, 200)
            })
            .catch(error => {
              _this.pickThirdAuthList = []
              console.error(error)
            })
        },
        IsSameName(value){
            // 判断重名
            let _this = this
            OrganApi.checkThirdAccountIsExist({ hospitalId: value })
            .then(res => {
                if(res.data == true){
                    // 表示该医院已被注册
                    _this.IsRegistered = true
                    this.$notify.error({
                        title: message.TITLE_ERROR ,
                        message: message.MSG_REGISTERED_ERROR
                    })
                }else if(res.data == false){
                    _this.IsRegistered = false
                }
            })
        },
        addData() {
            // 新增
            let _this = this //限制作用域
            let dataFormData = {
                thirdId: _this.otherForm.thirdId,
                hospitalId: _this.otherForm.hospitalId,
                officeId: _this.otherForm.officeId,
                compName: _this.otherForm.compName,
                clientId: _this.otherForm.clientId,
                clientGuid: _this.otherForm.clientGuid,
            }
            OrganApi.addThirdAccount(dataFormData)
                 .then(data => {
                   _this.$Utils.notifySuccess()
                   _this.returnList()
            })
        },
        editData(){
            // 编辑
            let _this = this
            let cond = {
              thirdId: _this.otherForm.thirdId,
              hospitalId: _this.otherForm.hospitalId,
              officeId: _this.otherForm.officeId,
              compName: _this.otherForm.compName,
              clientId: _this.otherForm.clientId,
              clientGuid: _this.otherForm.clientGuid,
              accountId: _this.otherForm.accountId
            }
          OrganApi.editThirdAccount(cond)
                .then(data => {
                  _this.$Utils.notifySuccess()
                  _this.returnList();
                }).catch(error => {
                    if (error.msg) {
                      _this.$Utils.notifyError()
                    }
            })
        },
        getData() {
            // 编辑时获取原有数据
            let _this = this
            OrganApi.getThirdAccountInfo({
                accountId: this.$route.query.accountId
            }).then(res => {
                _this.otherForm.clientGuid = res.data.clientGuid
                _this.otherForm.clientId = res.data.clientId
                _this.otherForm.compName = res.data.compName
                if (res.data.hospitalId){
                  _this.otherForm.hospitalId = parseInt(res.data.hospitalId)
                }
                if (res.data.officeId){
                  _this.otherForm.officeId = parseInt(res.data.officeId)
                }
              if (res.data.thirdId){
                _this.otherForm.thirdId = parseInt(res.data.thirdId)
              }
            })
            // 编辑过程中，医院名称的属性值不能进行修改
            //_this.IsEditing = true
        },
        sureOtherClick() {
            // 提交
            let _this = this
            _this.$refs.otherForm.validate(valid => {
            if (valid) {
                if (this.otherForm.accountId){
                    //接收到id即就编辑，否则为增加
                    this.$confirm(
                        message.MSG_CONFIRM_SAVE_ALTER,
                        message.TITLE_PROMPT,
                        {}
                    ).then(() => {
                        this.editData();
                    })
                    }else{
                     this.$confirm(
                        message.MSG_CONFIRM_SAVE_ADD,
                        message.TITLE_PROMPT,
                        {}
                    ).then(() => {
                        this.addData();
                        })
                    }
                }
            })
        },
        getOfficeId(val) {
          this.otherForm.officeId = val
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/organ/thirdAccountManagement'});
        }

    },
}
</script>

<style lang="scss" src="@/assets/css/views/content.scss" scop>

</style>
<style scoped>
.tit{
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
}
</style>
